<template>
    <div
        class="ReportLoss"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <el-card class="box-card">
            <div slot="headerss" class>
                <span>卡片解挂</span>
                <el-button class="btn_close" type="text" @click="handleClose">关闭</el-button>
            </div>
            <div>
                <div class="tab-header text_center">
                    <!-- <div class="headerTitles">卡片挂失</div> -->
                    <div class="bodyTitles">账户信息</div>
                    <!-- <el-divider></el-divider> -->
                    <!-- <el-divider content-position="left">账户信息</el-divider> -->
                </div>
                <div v-show="isShowAchieve">
                    <el-form
                        ref="formData"
                        :model="formData"
                        label-width="120px"
                        class="formData_form_inline"
                        size="small"
                        :inline="true"
                    >
                        <el-row>
                            <el-col :span="10" :offset="2">
                                <el-form-item label="账户类别:" class="text_fl">
                                    <!-- <el-select
                                        placeholder="请选择账户类别"
                                        clearable
                                        value-key="code"
                                        v-model="formData.CATEGORY"
                                    >
                                        <el-option
                                            v-for="item in AccountionTYPE_INFO"
                                            :key="item.code"
                                            :label="item.label"
                                            :value="item"
                                        ></el-option>
                                    </el-select>-->
                                    <el-input
                                        v-model="CATEGORY_filter"
                                        :disabled="true"
                                        class="el-form-item-input"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="卡号:" class="text_fl">
                                    <el-input
                                        v-model="formData.CARDNO"
                                        :disabled="true"
                                        class="el-form-item-input"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10" :offset="2">
                                <el-form-item label="客户姓名:" class="text_fl">
                                    <el-input
                                        v-model="formData.NAME"
                                        :disabled="true"
                                        class="el-form-item-input"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="证件号:" class="text_fl">
                                    <el-input
                                        v-model="formData.CUSTID"
                                        class="el-form-item-input"
                                        :disabled="true"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10" :offset="2">
                                <el-form-item label="卡片状态:" class="text_fl">
                                    <span class="el-form-item-span">{{CARDSTAT_value}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item class="text_fl">
                                    <el-input v-model="formData.getCurrentDate" type="hidden"></el-input>
                                    <el-input v-model="formData.getCurrentDateTime" type="hidden"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div class="text_center">
                            <el-button type="primary" size="small" @click="reportCardclose">解挂失</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                plain
                                @click="submitForm"
                            >未出账单明细查询</el-button>
                            <el-button type="primary" size="small" plain @click="handerReissue">换卡</el-button>
                        </div>
                    </el-form>
                    <el-dialog
                        v-drag
                        title="卡片解挂"
                        :visible.sync="centerDialogVisibleclose"
                        width="500px"
                        :append-to-body="true"
                        top="30vh"
                        :close-on-click-modal="false"
                        center
                    >
                        <p>
                            挂失卡号：
                            <span>{{this.formData.CARDNO}}</span>
                        </p>
                        <p>
                            解挂日期：
                            <span>{{this.formData.getCurrentDate|filterDateYYYYMMDD}}</span>
                        </p>
                        <p>
                            卡产品：
                            <span>{{this.PRODUCT_value}}</span>
                        </p>
                        <p class="text_center padding_top15">
                            <span style="color:#3a8ee6; ">您确认要解挂该卡吗？</span>
                        </p>
                        <span slot="footer" class="dialog-footer">
                            <el-button
                                size="small"
                                icon="el-icon-circle-close"
                                @click="centerDialogVisibleclose = false"
                            >取 消</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                @click="handerCardLossofcloss"
                                icon="el-icon-circle-check"
                                v-preventReClick
                            >确定</el-button>
                        </span>
                    </el-dialog>
                </div>
                <div v-show="!isShowAchieve">
                    <cardloss-of-item v-if="formDataInfo" :formDataInfo="formDataInfo"></cardloss-of-item>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import CardlossOfItem from './childItem/CardlossOfItem.vue';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import {
    closePage, trimString, getDictMappingValue, itoStr, getDictSelectList, updateDeal3601, updateDeal3004,
} from '@/utils/Common';

export default {
    // 账户信息  地址信息  卡片挂失信息
    // 4018
    name: 'ReportLoss',
    data() {
        return {
            defaultParams: this.$store.getters.defaultParams, // 请求头参数
            formData: {}, // 表单数据
            centerDialogVisibleclose: false,//解挂提示
            PRODUCT_value: '', // 卡产品 在数据字典里的值
            isShowAchieve: true,
            formDataInfo: '', // 给子集组件里传值用
            CATEGORY_filter: '',
            CardStatValue: [], // CLOCD 卡状态字段值 多个
            productId: '', // 判断卡类别,
            Keytype_option: '',//证件类型选项
            STSMAIL_option: '',//账单地址选项
            pageLoading: false,
            CARDSTAT_value: '', //卡片状态
        };
    },
    components: {
        CardlossOfItem,
        cardComponent,
    },
    filters: {
        filterDateYYYYMMDD: (value) => {
            value = (`${value}`).trim();
            if (value === '00000000') return value;
            if (value) {
                return moment(value, 'YYYYMMDD').format('YYYY-MM-DD');
            }
            return '';
        },
    },

    computed: {
        ...mapGetters([
            'cardInfo_3004',
            'AccountionTYPE_INFO',
            'pinFlag',
        ]),
    },

    async mounted() {
        this.pageLoading = true;
        this.formData = {
            CATEGORY: this.cardInfo_3004.CATEGORY, // 账户类别
            CARDSTAT: this.cardInfo_3004.CARDSTAT, // 卡片状态
            CUSTID: this.cardInfo_3004.CUSTID, // 证件号
            KEYTYPE: this.cardInfo_3004.KEYTYPE, // 证件类型
            NAME: this.cardInfo_3004.NAME, // 客户姓名

            CARDNO: this.cardInfo_3004.CARDNO, // 卡号
            getCurrentDate: moment().format('YYYYMMDD'),
            getCurrentDateTime: moment().format('hmm'),
            CANCODE: 'L', // //挂失代码
            OPTION: '000000000000000',
            LOSTTYPE: 'PHN',
        };
        await this.dictionaries();
        await this.getExecuteFun();
    },
    methods: {
        async getExecuteFun() {
            console.log('this.cardInfo_3004.CARDSTAT', this.cardInfo_3004.CARDSTAT);

            if (this.cardInfo_3004.CARDSTAT.trim() != 'L') {
                this.$alert(
                    `当前卡片状态为:${this.CARDSTAT_value},不可以进行解挂操作！`,
                    '解挂提示',
                    { customClass: 'warning', type: 'warning', showClose: false },
                ).then(() => {
                    closePage(this.$route, this, 1);
                });
            }
        },
        reportCardclose() {
            if (this.cardInfo_3004.CARDSTAT.trim() == 'L') {
                this.centerDialogVisibleclose = true;
            } else {
                this.$alert('解挂失操作，只能是卡片丢失状态的卡可操作！', '卡片挂失', {
                    customClass: 'warning', type: 'warning',
                });
            }
        },
        // 字典查找文字
        async dictionaries() {
            // 从数据字典里查  产品编号对应的文字
            this.PRODUCT_value = await getDictMappingValue('PRODUCT', this.cardInfo_3004.PRODUCT, this);
            this.CATEGORY_filter = await getDictMappingValue('CATE', this.cardInfo_3004.CATEGORY, this);
            this.CardStatValue = await getDictSelectList('CLOCD', this);
            this.pageLoading = false;
            this.filterCardstat(this.CardStatValue)
        },
        // 
        filterCardstat(CardStatValue) {
            console.log('value', this.cardInfo_3004.CARDSTAT);
            console.log('CardStatValue', CardStatValue);
            const value = (`${this.cardInfo_3004.CARDSTAT}`).trim();
            console.log("value2", value);
            if (value === '') {
                this.CARDSTAT_value = '正常';
                return;
            }
            for (let index = 0; index < CardStatValue.length; index++) {
                const element = CardStatValue[index];
                if (element.code === value) {
                    this.CARDSTAT_value = element.label;
                    return;
                }
            }
        },
        // 解挂操作
        handerCardLossofcloss() {
            if (this.cardInfo_3004.CARDSTAT.trim() === 'L') {
                this.CardLossofFun('');
            }
        },
        // 挂失交易
        CardLossofFun(CANCODE_value) {
            const defaultParam = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParam.body.appHead.tranCode = '4018';// 修改交易号
            defaultParam.body.appBody = {
                PINFLAG: this.pinFlag,
                PIN: '',
                LOSTDATE: this.formData.getCurrentDate,//遗失日期
                LOSTTIME: this.formData.getCurrentDateTime,//遗失时间
                CARDNBR: this.formData.CARDNO,// 卡号
                CANCODE: CANCODE_value,// 挂失代码
                LOSTTYPE: this.formData.LOSTTYPE,// LOSTTYPE 挂失方式  LTR信函挂失 PHN电话挂失  VTB到分行挂失 VTC到信用卡中心挂失
                OPTION: this.formData.OPTION,//检查项目选择
            }

            this.$post.common.transPort(defaultParam).then((res) => {
                if (res.status === 200) { // 请求成功
                    const cardlossofs = JSON.parse(res.data.jsonRes);
                    console.log(cardlossofs, '4018_卡资料信息');
                    if (cardlossofs.sysHead.rspCd == '000000') { // 交易成功
                        this.formDataInfo = cardlossofs;
                        this.isShowAchieve = false;
                        this.formDataInfo.CATEGORY = this.formData.CATEGORY;// 账户类别 信息保存 CATEGORY
                        this.formDataInfo.getCurrentDate = this.formData.getCurrentDate;
                        updateDeal3004(this.cardInfo_3004.CARDNO, this);
                        updateDeal3601(this.cardInfo_3004.CARDNO, this.cardInfo_3004.KEYTYPE, this.cardInfo_3004.CUSTID, this);
                    } else {
                        const ErrorMessage = `错误码：${cardlossofs.sysHead.rspCd} ` + `错误信息：${cardlossofs.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, cardlossofs.sysHead.busiName, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$message.error(cardData.sysHead.rspMsg);
                }
            });
            this.centerDialogVisibleclose = false;
        },
        // 跳转到换卡
        handerReissue() {
            this.$router.push({
                path: '/operationDeals/ChangeCard',
            });
        },
        //
        submitForm() {
            this.$router.push({
                path: '/businessSystem/unBillChecked',
            });
        },
        // 点击关闭
        handleClose() {
            closePage(this.$route, this, 1);
        },
    },
};
</script>

<style lang='scss'>
.ReportLoss {
    .box-card {
        border: none !important;
    }
    .el-card__header {
        padding: 8px !important;
    }
    .el-form-item-input input {
        /* width: 250px;
        height: 35px;
        line-height: 35px; */
    }

    .el-dialog__body p {
        text-align: left;
        padding-left: 30%;
        margin: 8px 5px;
        span {
            color: #3a8ee6;
        }
    }
    .el-card.is-always-shadow {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .el-card {
        border: none;
    }
}
</style>
